<template>
  <el-aside class="keylist" width="300px">
    <div class="key-header">
      <el-row :gutter="10" style="margin: 10px 0">
        <el-col :span="18">
          <el-input placeholder="搜索" prefix-icon="el-icon-search" v-model="search"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button @click="addNewKey">+</el-button>
        </el-col>
      </el-row>
      <div class="tips">
        <span>当前redis库 数据共 {{ count }} 条</span>
      </div>
    </div>
    <div ref="keyTable" class="key-content">
      <ul class="infinite-list">
        <li v-for="i in count" class="infinite-list-item"
            :class="{active:activceKey === i}"
            @click="handleKeySelect(i)"
        >
          <el-row align="middle">
            <el-col :span="6">
              <el-tag v-if="i % 5 === 0" type="success" effect="plain" class="item-tag">string</el-tag>
              <el-tag v-if="i % 5 === 1" type="danger" effect="plain" class="item-tag">hash</el-tag>
              <el-tag v-if="i % 5 === 2" type="" effect="plain" class="item-tag">list</el-tag>
              <el-tag v-if="i % 5 === 3" type="info" effect="plain" class="item-tag">set</el-tag>
              <el-tag v-if="i % 5 === 4" type="warning" effect="plain" class="item-tag">zset</el-tag>
            </el-col>
            <el-col :span="18" class="item-content">
              <div>novel:{{ i }}:chapters:sort:height</div>
            </el-col>
          </el-row>
        </li>
      </ul>
      <el-link href="javascript:void(0)" type="primary" @click="scanMore">scan more ...</el-link>
    </div>
    <el-dialog
        title="新建&nbsp;Key-Value"
        v-model="createKeyStatus"
        width="40%">
      <el-form class="demo-form-inline" label-position="right" style="width: 90%;margin:0 auto;">
        <el-form-item label="Key" label-width="60px">
          <el-input v-model="createData.key" placeholder="Key"></el-input>
        </el-form-item>
        <el-form-item label="Type" label-width="60px">
          <el-select v-model="value" placeholder="请选择" style="width: 100%">
            <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Value" label-width="60px">
          <el-input v-model="createData.content" type="text" placeholder="value"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleInsertKey">确 定</el-button>
      </span>
      </template>
    </el-dialog>
  </el-aside>
</template>

<script>
export default {
  name: "key_list",
  data() {
    return {
      search: '',
      count: 100,
      activceKey: 0,
      createKeyStatus: false,
      createData: {
        key: '',
        ttl: '',
        content: '',
      },
      typeOptions: [
        {label: 'String', value: 'string'},
        {label: 'Hash', value: 'hash'},
        {label: 'List', value: 'list'},
        {label: 'Zet', value: 'zet'},
        {label: 'sorted zet', value: 'sortedzet'}
      ],
      value: ''
    }
  },
  created() {
    this.handleKeySelect(1)
  },
  methods: {
    scanMore() {
      this.count += 100;
    },
    addNewKey() {
      this.createKeyStatus = true
    },
    handleKeySelect(selectKey) {
      this.activceKey = selectKey

      let type = 'string'
      switch (selectKey % 5) {
        case 0:
          type = 'string';
          break;
        case 1:
          type = 'hash'
          break;
        case 2:
          type = 'list'
          break;
        case 3:
          type = 'set'
          break;
        case 4:
          type = 'zset'
          break;
        default :
          type = "string"
      }

      let key = selectKey + 'type'
      this.$store.state.redisData.type = type
      this.$router.push('/content/' + type + '/' + key)
    },
    handleInsertKey() {
    },
  },
  mounted() {
  },
}
</script>

<style scoped lang="less">
.keylist {
  border-right: 1px solid #f5f5f5;
  height: 100%;

  .key-header {
    height: 90px;
    background: rgb(255, 255, 255);
    position: static;
  }

  .key-content {
    height: calc(100% - 130px);
    overflow: scroll;

    .infinite-list {

      .infinite-list-item {

        height: 30px;
        padding: 5px;

        &.active {
          background: rgba(66, 185, 131, 0.45);
        }

        .item-tag {
          width: 60px;
        }

        .item-content {
          width: 80px;
          text-align: left;
          padding-left: 1px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .sacn-more {
      color: #4876e8;
    }
  }
}


</style>